<template>
  <div>
    <Content>
      <van-checkbox-group v-model="result" ref="checkboxGroup" @change="change">
        <div class="car-good-list" v-for="(item, index) in carList" :key="index">
          <div class="list-left">
                <van-checkbox :name="item"></van-checkbox>
          </div>

          <div class="list-middle">
            <van-card class="list-name" :price="item.basicInfo.originalPrice"
              :desc="item.basicInfo.characteristic"
              :title="item.basicInfo.name"
              :thumb="item.basicInfo.pic">
              <template #footer>
                <van-stepper
                  v-model="numList[index].num"
                  @plus="plus"
                  @minus="minus"
                />
              </template>
            </van-card>
          </div>

          <div class="list-right">
              <el-button icon="el-icon-delete" @click="del(index)"></el-button>
          </div>
        </div>
      </van-checkbox-group>

      <van-submit-bar
        :price="allPrice"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="checked" @click="checkall">全选</van-checkbox>
      </van-submit-bar>
    </Content>
  </div>
</template>

<script>
import Vue from "vue";
import Content from "../components/content/Content";
import mixin from "../store/mixin";
export default {
  mixins: [mixin],
  components: {
    Content,
  },
  computed: {
    allPrice() {
      var sum = 0;
      this.result.forEach((item, index) => {
        return (sum +=
          item.basicInfo.originalPrice * this.numList[index].num * 100);
      });
      return sum;
    },
  },
  data() {
    return {
      checked: false,
      result: [],
    };
  },
  methods: {
    goBack() {
      window.history.go(-1);
    },
    goHome() {
      this.$router.pushRouteByQuery("/");
    },
    onSubmit(){
    },
    change() {
      if (
        this.result.length == this.carList.length &&
        this.result.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    checkall() {
      if (this.checked == true) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    del(index){
      this.$store.commit("del",index);
    }
  },
};
</script>
<style scoped>
.car-good-list {
  width: 100%;
  height:133px;
  /* background-color: lightgreen; */
  display: inline-flex;
  justify-content: center;
  align-content: center;
  border-bottom:1px solid lightgray;
  border-top:1px solid lightgray;
  margin-bottom:3px;
}
.list-name{
  background-color:white;
}
.list-middle{
  width:70%;
  height:100%;
}
.list-left{
  width:15%;
  height:100%;
  display: inline-flex;
  justify-content: center;
  align-content: center;
}
.list-right{
  width:15%;
  height:100%;
  display: inline-flex;
  justify-content: center;
  align-content: center;
}
</style>